<template>
    <div class="app">
        <div class="header">
            <div class="centered-text">分类</div>
            <input type="text" class="searchBar" placeholder="搜索">
            <img src="../../assets/cetegoryImg/搜索.png" alt="">
        </div>
    </div>
</template>
  
<script>
export default {
    name: 'cateHeader',
    data() {
        return {

        };
    }
    //注册组件
}
</script>
  
<style scoped >
/* 头部样式开始 */
.header {
    background-color: rgb(235, 24, 67);
    height: 100px;
    position: relative;
}

.centered-text {
    /* margin-top: 30px; */
    display: flex;
    justify-content: center;
    align-items: center;
    color: aliceblue;
}

.searchBar {
    display: block;
    margin: 0 auto;
    height: 20px;
    width: 95%;
    background-color: aliceblue;
    border: 0;
    text-align: center;
    margin-top: 40px;
    border-radius: 5px;
}

div>img {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 62%;
    left: 40%;
}

/* 头部样式结束 */
</style>